<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/css/bulma.min.css">
    <script src="/static/js/vue.global.prod.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <title>myplayadd</title>
</head>
<body>
<nav class="navbar is-light" id="mynav">
  <div class="navbar-menu">
    <div class="navbar-start">
      <template v-for="myleft in mylefts">
        <a class="navbar-item" :href="myleft.href">{{ myleft.display }}</a>
      </template>
    </div>
    <div class="navbar-end">
      <template v-for="myright in myrights">
        <a class="navbar-item" :href="myright.href">{{ myright.display }}</a>
      </template>
    </div>
  </div>
</nav>
<div id="app" class="columns">
    <div class="column is-4">
      <form>
          <input type="text" class="input" v-model="addinfo.name" placeholder="name">
          <textarea rows="3" class="textarea" v-model="addinfo.hosts" placeholder="hosts"></textarea>
          <textarea rows="3" class="textarea" v-model="addinfo.playbook" placeholder="playbook"></textarea>
          <input type="text" class="input" v-model="addinfo.forks" placeholder="forks">
          <input type="text" class="input" v-model="addinfo.key" placeholder="key">
          <div class="select">
             <select v-model="addinfo.proxy">
                <option value="false">无</option>
                <template v-for="oneproxy in myproxys">
                  <option :value="oneproxy">{{oneproxy}}</option>
                </template>
              </select>
          </div><br />
      </form>
      <button class="button" @click="realadd(addinfo)">添加</button>
      <pre style="white-space: pre-wrap; word-wrap: break-word;">{{addresult}}</pre>
    </div>
</div>
<script src="/static/js/thesame.js"></script>
<script>
const app = {
  data() {
    return {
      addresult: '',
      myproxys: [],
      addinfo: {
        name: 'testtest',
        hosts:'hosts',
        playbook:`- hosts: all
  gather_facts: no
  tasks:
  - name: shell test
    shell: ifconfig
    register: result
  - debug: var=result`,
        forks:'forks',
        key: 'key',
        proxy: 'false',
      }
    }
  },
  watch : {
  },
  methods: {
    get_proxynames() {
        axios({
          method:'get',
          url:'/myproxy/Getnames',
          async:false
        })
        .then(response => {
            this.myproxys = response.data;
        })
    },
     realadd(addinfo){
        this.addresult = 'adding....';
        axios({
          method:'post',
          url:'/myplay/Realadd',
          data: JSON.stringify(addinfo),
          async:false
        })
        .then(response => {
            this.addresult = response.data;
        })
    },
  },
  mounted () {
    this.get_proxynames();
  }
}

Vue.createApp(app).mount('#app')
</script>
</body>
</html>